/**
 * @Description:
 * @Author bianpengfei
 * @create 2022/9/17 15:28
 */
import { formatAxisLabel } from '@base/chart/utils'
import { isObject, domUtils } from '@bianpengfei/utils'

export default {
  handler() {
    const [data] = arguments

    const enhancerValueY1 = this._enhancerDataObj['valuey1']
    const enhancerValueY2 = this._enhancerDataObj['valuey2']
    // const enhancerValueZ1 = this._enhancerDataObj['valuez1']
    // const enhancerValueZ2 = this._enhancerDataObj['valuez2']

    // colorStops
    let borderColorY1 = enhancerValueY1?.color

    if (isObject(enhancerValueY1?.color)) {
      borderColorY1 = enhancerValueY1?.color?.colorStops?.at?.(0)?.color
    }

    let borderColorY2 = enhancerValueY2?.color

    if (isObject(enhancerValueY2?.color)) {
      borderColorY2 = enhancerValueY2?.color?.colorStops?.at?.(-1)?.color
    }
    return {
      legend: {
        show: true,
        orient: 'horizontal',
        itemHeight: 4,
        itemWidth: 34,
        itemGap: 30,
        data: [
          enhancerValueY1?.name && {
            name: enhancerValueY1.name,
            icon: 'rect'
          },
          enhancerValueY2?.name && {
            name: enhancerValueY2.name,
            icon: 'rect'
          }
        ].filter(Boolean)
      },
      grid: {
        left: 40,
        bottom: 40,
        right: 40,
        top: 40
      },
      xAxis: {
        type: 'category',
        data: this._dataObj['name'],
        boundaryGap: false,
        // data: this._dataObj['name'],
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          show: true,
          // fontSize: 9,
          // rotate: 30,
          interval: '0'
          // formatter: (text) => {
          //   return formatAxisLabel(text, 3)
          // }
        },
        splitLine: {
          // 不显示分割线
          show: false
        }
      },
      tooltip: {
        show: true,
        trigger: 'axis',
        formatter: function () {
          const [val] = arguments[0]
          return `<div>${val.name}：${val.value}${enhancerValueY1.unit || ''}</div>`
        },
        backgroundColor: 'rgba(0,0,0,0.7)', // 设置背景图片 rgba格式
        borderWidth: 0,
        padding: [8, 10],
        textStyle: {
          color: '#fff', // 设置文字颜色
          fontSize: 12
        }
      },
      yAxis: [
        enhancerValueY1 && {
          name: enhancerValueY1.unit,
          type: 'value',
          splitNumber: 4,
          splitLine: {
            // 显示分割线
            show: true
          },
          nameTextStyle: {
            align: 'left',
            fontSize: 10
          },
          axisLabel: {
            fontSize: 10,
            formatter: (data) => {
              return `${data}`
            }
          }
        }
      ].filter(Boolean),
      series: [
        enhancerValueY1 && {
          name: enhancerValueY1.name,
          data: enhancerValueY1.data,
          type: 'line',
          // stack: 'Total',
          smooth: true,
          // symbol: 'dot',
          symbolSize: [10, 10],
          areaStyle: {
            color: enhancerValueY1.color,
            lineStyle: {
              // 系列级个性化折线样式
              width: 1,
              type: 'solid',
              color: borderColorY1
            }
          },
          showSymbol: true,
          lineStyle: {
            color: '#4296F7'
          },
          itemStyle: {
            color: borderColorY1,
            normal: {
              color: '#4296F7'
            }
          }
        },
        enhancerValueY2 && {
          name: enhancerValueY2.name,
          type: 'line',
          // stack: 'Total',
          symbol: 'roundRect',
          data: enhancerValueY2.data,
          showSymbol: false,
          areaStyle: {
            normal: {
              color: enhancerValueY2.color
            },
            lineStyle: {
              // 系列级个性化折线样式
              width: 1,
              type: 'solid',
              color: borderColorY2
            }
          },
          lineStyle: {
            color: borderColorY2
          },
          itemStyle: {
            normal: {
              color: borderColorY2
            }
          }
        }
      ].filter(Boolean)
    }
  }
}
